<template>
  <div class="container">
    <div class="input">
      <slot name="input"></slot>
    </div>
    <div class="line"></div>
    <div class="content">
      <slot name="content"></slot>
    </div>
    <div class="line"></div>
    <div class="btns">
      <GridTemplate :gridList="btns" @gridClick="emit('gridClick', $event)" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";

type propType = {
  btns: Array<gridType>;
};

const props = withDefaults(defineProps<propType>(), {
  btns: () => []
});

const emit = defineEmits(["gridClick"]);
</script>

<style lang="scss" scoped>
@import "@/styles/var.scss";

.container {
  width: 70vw;
  height: calc(100vh - 140px);
  margin: 10px auto;
  display: flex;
  flex-direction: column;
  box-shadow: $slanting-shadow;
  border-radius: 6px;
  user-select: none;

  .input {
    flex: 2;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 2% 0 0 2%;
  }

  .line {
    height: 1px;
    width: 100%;
    background: #ccc;
    transform: scaleY(0.2);
  }

  .content {
    flex: 1;
    margin: 10px 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0 2%;
  }

  .btns {
    flex: 3;
    padding-bottom: 20px;
  }
}
</style>
